<template>
  <div>
    <Title title="意见新增"></Title>
    <el-row>
      <el-col :span="6">
        <el-form
          ref="formRef"
          :model="form"
          status-icon
          :rules="rules"
          label-width="120px"
          label-position="top"
          class="myform"
        >
          <el-form-item label="意见标题" prop="title">
            <el-input
              clearable
              v-model="form.title"
              placeholder="意见标题"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="意见分类" prop="cate">
            <el-select
              v-model="form.cate"
              class="m-2"
              style="width: 100%"
              placeholder="意见分类"
              size="default"
            >
              <el-option
                v-for="item in AdviseTypes"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="意见内容" prop="context">
            <el-input
              rows="10"
              clearable
              v-model="form.context"
              placeholder="意见内容"
              type="textarea"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btnblock" @click="submitData()"
              >添加意见</el-button
            >
            <el-button type="danger" class="btnblock" @click="resetForm(formRef)"
              >重置数据</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ShowErrorMsg,AdviseTypes } from "@/utils";
import { Ajax } from "@/api";
import { useRouter } from "vue-router";
import type { FormInstance } from 'element-plus'
const router = useRouter();
const formRef = ref<FormInstance>()
const form = reactive({});
const rules = reactive({
  title: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  context: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  cate: [
    //这个校验平时不会触发，提交表单会触发
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});

const submitData = () => {
  formRef.value.validate(async (valid: any) => {//添加还是行的
    //整个表单校验
    if (valid) {
      let res: any = await Ajax.adviseadd(form);
      if (res.code == 200) {
        router.push({ name: "advise-list" });
      } else {
        ShowErrorMsg("校验失败");
      }
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style></style>
